<template>
  <div class="item">
    <div class="item-left">
      <check-button :isChecked="ListItem.checked" @click.native="checkClick">
      </check-button>
    </div>
    <div class="item-center"><img :src="ListItem.image" alt=""></div>
    <div class="item-right">
      <h3 class="title">{{ListItem.title}}</h3>
      <p class="desc">{{ListItem.desc}}</p>
      <span class="price">￥{{ListItem.price}}</span>
      <span class="count">x{{ListItem.count}}</span>
    </div>
  </div>
</template>

<script>
  import CheckButton from '@/components/content/CheckButton.vue'
  export default {
    name: "ShopListItem",
    components: {
      CheckButton
    },
    props: {
      ListItem: {
        type: Object,
        default() {
          return {}
        }
      },
      index: {
        type: Number
      }
    },
    methods: {
      checkClick() {
        this.$store.commit("checkClick", this.index)
      }
    }
  }
</script>

<style scoped>
  .item {
    display: flex;
    width: 100%;
    padding: 10px;
    height: 120px;
    border-bottom: 1px solid #ccc;
  }
  .item-left {
    width: 20px;
    margin: auto 0;
  }
  .item-center {
    width: 88px;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 9px 0 8px;
  }
  .item-center img {
    width: 100%;
  }
  .item-right {
    width: 60%;
  }
  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
    font-size: 16px;
    margin-top: 3px;
  }
  .desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: #848484;
    margin: 15px 0 20px 0;
  }
  .price {
    float: left;
    font-size: 17px;
    font-weight: 600;
    color: #ea7740;
    margin-left: 5px;
    margin-bottom: 5px;
  }
  .count {
    float: right;
    margin-right: 20px;
  }
</style>